<template>
  <div class="app-container">
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="数据图表" name="chart"></el-tab-pane>
      <el-tab-pane label="基本数据" name="full"></el-tab-pane>
    </el-tabs> -->

    <div class="list" v-if="activeName == 'full'">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="25分位" prop="twentyFivePercentile">
          <template slot-scope="scope">
            {{ scope.row.twentyFivePercentile }}
          </template>
        </el-table-column>
        <el-table-column label="50分位" prop="fiftyPercentile">
          <template slot-scope="scope">
            {{ scope.row.fiftyPercentile }}
          </template>
        </el-table-column>
        <el-table-column label="75分位" prop="seventyFivePercentile">
          <template slot-scope="scope">
            {{ scope.row.seventyFivePercentile }}
          </template>
        </el-table-column>

        <el-table-column label="平均数" prop="salaryNum">
          <template slot-scope="scope">
            {{ scope.row.salaryNum }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="echart" v-if="activeName == 'chart'">
      <div class="averygeBarChart">
        <averygeBarChart />
      </div>
    </div>
  </div>
</template>

<script>
import { getAverageSalary } from '@/api/salary';
import averygeBarChart from '@/views/position/components/averygeBarChart';
export default {
  name: 'AverageSalary',
  components: {
    averygeBarChart
  },
  data() {
    return {
      activeName: 'chart',
      list: null,
      listLoading: true,
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 20, // 每页多少条
        total: 0 // 总记录数
      },
      pageSizes: [10, 20, 30]
    };
  },
  created() {
    this.fetchData();
    this.positionName = this.$route.query.name;
  },
  methods: {
    handleClick() {
      this.fetchData();
    },
    fetchData() {
      this.listLoading = true;
      const params = {
        id: this.$route.query.id,
        page: this.tablePage.pageNum,
        perPage: this.tablePage.pageSize
      };
      getAverageSalary(params).then((response) => {
        const count = response.data.count - 0;
        this.tablePage.total = count;
        if (response.data && response.data.salaryNum) {
          this.list = [response.data];
        } else {
          this.list = [];
        }
        console.log(this.list);

        this.listLoading = false;
      });
    }
  }
};
</script>

<style scoped>
.list {
  /* height: 650px;
  overflow-y: auto; */
}
.app-container {
  padding-right: 56px;
  padding-top: 0px;
  min-height: 720px;
  min-width: 80vw;
  /* max-height: calc(100vh - 100px); */
  /* background: linear-gradient(180deg, #eaf5ff 0%, #ffffff 100%); */
  background-image: url('https://upload.yl1001.com/upload/images/view?file=Q,tr--ap_8c=fney6Bg2IJzH69mz6q=xfFRO5e57Imp9e0psmHce_CdVSB9mv.png');
  background-size: 200% auto;
  background-repeat: no-repeat;
  border-radius: 10px 8px 8px 8px;
  border: 0;
  padding-top: 10px;
  width: 100%;
}
.regionBarChart,
.regionLineChart {
  width: 100%;
  display: flex;
  align-items: center;
}
.descTitle {
  color: #555;
  font-size: 16px;
}
.descNum {
  display: flex;
  align-items: center;
  color: #1b78ff;
  font-weight: bold;
  font-size: 30px;
  margin-top: 22px;
  font-family: D-DIN-PRO-600-SemiBold;
}
::v-deep .el-tabs__item {
  height: 40px !important;
  color: #999999;
  font-size: 16px;
}
::v-deep .el-tabs__item.is-active {
  color: #1574ff;
  font-weight: bold;
}
::v-deep .el-tabs__nav-wrap::after {
  background-color: #d6dfff;
  height: 1px;
}
.rmb {
  font-size: 22px;
}
::v-deep .el-tabs__item {
  height: 40px !important;
  color: #999999;
}
::v-deep .el-tabs__item.is-active {
  color: #1574ff;
}
.search-container {
  /* margin-bottom: 24px; */
}
.pagination {
  margin-top: 24px;
}
::v-deep .el-table th > .cell {
  color: rgba(0, 0, 0, 0.85);
}
::v-deep .el-table th {
  background-color: #fafafa;
}
::v-deep.el-form--inline .el-form-item {
  margin-right: 24px;
}
.filter-item {
  margin-bottom: 12px;
}

::v-deep .el-form-item {
  display: flex;
  align-items: center;
}
::v-deep .el-form-item__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  min-width: 68px !important;
}
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
</style>
